<template>
  <div class="app-container">
    <div class="baidumap" id="allmap"></div>
  </div>
</template>

<script>
  export default {
    name: "pm-distribution",
    components: {},
    data() {
      return {
        visible: null,
        paramNumber: null, //页面跳转传递的厂区号
        list: null,
        flag: true,
        listLoading: true,
      }
    },
    created() {
      this.fetchData();
    },
    mounted() {
      this.initBaiduMap();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        this.list = [{
            name: '宝珠寺',
            longitude: 105.871266,
            latitude: 31.418535,
            reservoirWaterLevel: 1325,
            number: 1
          },
          {
            name: '沙溪',
            longitude: 105.944685,
            latitude: 31.622561,
            reservoirWaterLevel: 1325,
            number: 2
          }, {
            name: '亭子口',
            longitude: 105.847123,
            latitude: 31.833036,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '金银台',
            longitude: 106.049458,
            latitude: 31.549784,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '红岩子',
            longitude: 106.437709,
            latitude: 31.567653,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '凤仪',
            longitude: 106.202317,
            latitude: 30.953821,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '小龙门',
            longitude: 106.103481,
            latitude: 30.769594,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '青居',
            longitude: 106.111387,
            latitude: 30.681337,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '东西关',
            longitude: 106.128507,
            latitude: 30.5216,
            reservoirWaterLevel: 1325,
            number: 3
          }
        ]
        this.listLoading = false;
      },

      initBaiduMap() {
        var map = new BMap.Map("allmap"); // 创建地图实例
        for (var i = 0; i < this.list.length; i++) {
          var point = new BMap.Point(
            this.list[i].longitude,
            this.list[i].latitude
          );
          var infoMessage = `
              ${this.list[i].name}
              <div class='nodate'>今日水位:${this.list[i].reservoirWaterLevel}</div>
              <div class='nodate'>无数据！</div>
              <br>
              <span class='reminder'>点击标记获取更多信息</span>
            `;

          //调用创建marker标记的方法，
          var marker = this.createMarker(
            point,
            infoMessage,
            this.list[i].number,
          );
          map.addOverlay(marker); //添加marker


          // 创建文本标注对象
          var labelopts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMap.Size(0, 0) // 设置文本偏移量
          };
          var label = new BMap.Label(this.list[i].name, labelopts);
          //文本标注样式，transform为X轴平移，即文本居中显示
          label.setStyle({
            color: "#fff",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            borderRadius: "10px",
            padding: "0 10px",
            fontSize: "14px",
            lineHeight: "20px",
            border: "0",
            transform: 'translateX(-50%)'
          });
          //添加文本标注
          map.addOverlay(label);
        }
        var center = new BMap.Point(104.01024, 30.643592); //设置中心点坐标
        map.centerAndZoom(center, 8); // 初始化地图,设置中心点坐标和地图级别。
        map.setCurrentCity("成都"); // 设置地图显示的城市
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // 添加其他地图元素，例如流域线条等
        this.addRiverBasins(map);
      },
      addRiverBasins(map) {
        // 示例：使用多边形展示长江流域
        const longRiverCoords = [
          new BMap.Point(105.0, 30.6),
          new BMap.Point(105.5, 30.7),
          new BMap.Point(106.0, 30.8),
          new BMap.Point(106.5, 30.9),
          // 更多长江流域的坐标
        ];
        const longRiverPolygon = new BMap.Polyline(longRiverCoords, {
          strokeColor: "#FF0000",
          fillColor: "lightblue",
          fillOpacity: 0.5
        });
        map.addOverlay(longRiverPolygon);

        // 可以继续添加其他支流的多边形
      },

      //创建maeker和infowindow
      createMarker(point, iw, paramNumber) {
        var markerx = new BMap.Marker(point);
        //鼠标停留发生的事件
        markerx.addEventListener("mouseover", function(e) {
          this.openInfoWindow(new BMap.InfoWindow(iw));
        });
        //鼠标划出发生的事件
        markerx.addEventListener("mouseout", function(e) {
          this.closeInfoWindow(new BMap.InfoWindow(iw));
        });
        //点击标记发生的事件
        var that = this;
        markerx.addEventListener("click", function(e) {
          // that.$router.push({
          //   path: "点击之后要跳转的路径",
          //   query: {
          //     paramnumber: paramNumber
          //   }//给跳转页面传递的参数
          // });
          console.log("click")
        });
        return markerx;
      },
    }
  };
</script>
<style>
  .baidumap {
    width: 100%;
    /* height: 650px; */
    height: 85vh
  }

  /* 去除百度地图版权那行字 和 百度logo */
  .baidumap>.BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap>.anchorBL {
    display: none !important;
  }

  /* 弹出框中标题样式 */
  .title {
    color: darkgreen;
    text-align: center;
    height: 10px;
  }

  /* 弹出框中提示“无数据”的样式 */
  .nodate {
    color: dimgrey;
    text-align: center;
  }

  /* 弹出框底部的点击提示样式 */
  .reminder {
    font-size: 12px;
    color: darkcyan;
    margin-left: 100px;
  }
</style>
